<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>canvas合成图片</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            width: 100vw;
            height: 100vh;
            background: rgb(41, 36, 34);
        }

        .container {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%)
        }

        .headerbox {
            position: relative;
        }

        .headerbox .himg {
            width: 100px;
            height: 100px;
        }

        .headerbox .icon {
            width: 30px;
            height: 30px;
            position: absolute;
            right: 0;
            bottom: 0px;
        }

        .rowbox {
            margin-top: 20px;
        }

        .alertmc {
            width: 100vw;
            height: 100vh;
            background: rgba(71, 68, 67, 1);
            position: absolute;
            left: 0;
            top: 0;
            display: none
        }

        .alertmc img {
            width: 100px;
            height: 100px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%)
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="headerbox">
            <img class="himg" src="./image/header.jpg" alt="">
            <img src="./image/img1.png" alt="" class="icon">
        </div>
        <div class="rowbox">
            <button id="last">上一张</button>
            <button id="next">下一张</button>
        </div>
        <button id="save">合成</button>
    </div>
    <div class="alertmc">
        <img class="alertimg" src="./image/header.jpg" alt="">
    </div>


    <script>
        let imglist= ['./image/img1','./image/img2','./image/img3','./image/img4','./image/img5','./image/img6']
        let current = 0
        let header = document.querySelector('.himg')
        let icon = document.querySelector('.icon')
        let last = document.querySelector('#last')
        let next = document.querySelector('#next')
        let save = document.querySelector('#save')
        let alertmc = document.querySelector('.alertmc')
        let alertimg = document.querySelector('.alertimg')

        next.addEventListener('click',function(){ 
            current++
            if(current>=imglist.length){
                current = 0
            }
            icon.src = imglist[current]+'.png'
        })
        last.addEventListener('click',function(){ 
            current--
            if(current<0){
                current = imglist.length-1
            }
            icon.src = imglist[current]+'.png'
        })
        save.addEventListener('click',function(){
            let canvas = document.createElement('canvas')
            let ctx = canvas.getContext('2d')
            canvas.width=500
            canvas.height=500
            ctx.drawImage(header,0,0,500,500)
            ctx.drawImage(icon,350,350,150,150)
            let alertImgUrl = canvas.toDataURL("image/png")
            alertimg.src= alertImgUrl
            alertmc.style.display = 'block'
        })
   </script>
</body>

</html>